<!-- 当前页面尚未开发 -->
<template>
    <div class='noFind'>
        <div class="tomatoHead">
            <!-- 返回 -->
            <div class="returnMain">
                <svg class="svg-icon" aria-hidden="true" title="返回主界面" @click="changeComponent">
                    <use :xlink:href="icons[1]"></use>
                </svg>
            </div>
        </div>
        <h1 class="description">
            404 not found
        </h1>
        <h2 class="description2">
            当前页面功能尚未制作
        </h2>
    </div>
</template>

<script>
export default {
    name: 'noFind',
    props: {},
    data () {
        return {
            icons: ['#icon-Tomato', '#icon-fanhui'],
        };
    },
    mounted() {},
    components: {},
    computed: {},
    methods: {
        // 返回主界面
        changeComponent(){
            this.$parent.changeComponent(1);
        },
    }
}

</script>
<style  lang='less' scoped>
@import url(../../assets/css/common.less);
    .noFind {
        .w(100%, 100%);
        .backgroundImg('../../assets/img/main/tomato_bg2.png');
        .tomatoHead {
            .wandh(100%, 40px);
            display: flex;
            align-items: center;
            // 返回主界面
            .returnMain {
                flex: 1;
                text-align: right;
                margin-right: 5px;
                .svg-icon {
                    fill: aliceblue;
                    cursor: pointer;
                    &:hover {
                        fill: #fff;
                        filter:drop-shadow(#fff 0px 0px 5px);
                    }
                }
                .svg-icon {
                    .wandh(30px, 25px);
                }
            }
        }
        .description {
            text-align: center;
            color: #fff;
            margin: 10px 0px;
        }
        .description2 {
            text-align: center;
            color: #fff;
        }
    }
</style>